$.get('http://127.0.0.1:5000/bar').then(res => {
    const myChart = echarts.init(document.getElementById('bar'))
    const option = {
        title: {
            text: '',
            left: 'center'
        },
        legend: {
            left: 'right',
            type:'scroll',
            selectedMode:'single',
            width:'140'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: res.year,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: res.data.map((value) => {
            return {
                name: value[0],
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                data: value.slice(1)
            }
        })
    }
    myChart.setOption(option)
})

$.get('http://127.0.0.1:5000/line').then(res => {
    const myChart = echarts.init(document.getElementById('line'))
    const option = {
        xAxis: {
            type: 'category',
            data: res.year
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: res.first_line,
                type: 'line'
            },
            {
                data: res.second_line,
                type: 'line'
            },
            {
                data: res.third_line,
                type: 'line'
            }
        ]
    }
    myChart.setOption(option)
})

$.get('static/data/geo.json').then(geo => {
    $.get('http://127.0.0.1:5000/geo').then(res => {
        echarts.registerMap('ZG', geo)
        const myChart = echarts.init(document.getElementById('geo'))
        const option = {
            title: {
                text: '',
                textStyle: {
                    color: '#000000'
                }
            },
            legend: {
                bottom: 'bottom'
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                min: 0,
                max: 130000,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [
                {
                    name: '房产数量',
                    type: 'map',
                    map: 'ZG',
                    data: res.data[0],
                    label: {
                        show: true
                    }
                }
            ]
        }
        myChart.setOption(option)
    })
})


$.get('http://127.0.0.1:5000/pie').then(res => {
    const myChart = echarts.init(document.getElementById('pie'))
    const option = {
        title: {
            text: '',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '房屋类型',
                type: 'pie',
                radius: '50%',
                data: res.data[0],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option)
})


$.get('http://127.0.0.1:5000/radar').then(res => {
        const myChart = echarts.init(document.getElementById('radar'))
        const option = {
            backgroundColor: '#161627',
            title: {
                text: 'AQI - Radar',
                left: 'center',
                textStyle: {
                    color: '#eee'
                }
            },
            radar: {
                indicator: res.data_max,
                shape: 'circle',
                splitNumber: 5,
                axisName: {
                    color: 'rgb(238, 197, 102)'
                },
                splitLine: {
                    lineStyle: {
                        color: [
                            'rgba(238, 197, 102, 0.1)',
                            'rgba(238, 197, 102, 0.2)',
                            'rgba(238, 197, 102, 0.4)',
                            'rgba(238, 197, 102, 0.6)',
                            'rgba(238, 197, 102, 0.8)',
                            'rgba(238, 197, 102, 1)'
                        ].reverse()
                    }
                },
                splitArea: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(238, 197, 102, 0.5)'
                    }
                }
            },
            series: {
                name: '',
                type: 'radar',
                lineStyle: {
                    width: 1,
                    opacity: 0.5
                },
                data: res.data,
                symbol: 'none',
                itemStyle: {
                    color: '#B3E4A1'
                },
                areaStyle: {
                    opacity: 0.05
                }
            }
        };
        myChart.setOption(option)
    }
)